﻿<!DOCTYPE html>
<html> 
<head>
  <title>Maps Data API JavaScript Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBRtpBalue-XiU0nXijyxJOFOqsHnxRGD0o9IFUpzzG944F17kJozXrQzQ"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/mymaps.js"></script>
</head>
<body>
  <!-- for JS GData/AuthSub -->
  <img src="dot_clear.gif" style="display: none"/>

  <div id="errors" style="color: #f00; font-weight: bold; display: none"></div>

  <div id="state-guest" style="display: none">
    <a href="#" onclick="login(); return false;">Login</a>
  </div>
  
  <div id="state-loggedin" style="display: none">
    <a href="#" onclick="logout(); return false;">Logout</a>
  
    <h3>List of Maps:</h3>
    <ul id="map-list"></ul>
  
    <h3>Features in this map:</h3>
    <ul id="feature-list"></ul>
  
    <h3>KML of this feature:</h3>
    <textarea id="feature-kml" cols="40" rows="7"
              style="width: 100%; height: 300px"></textarea>
  </div>

  <hr />
  <div id="canvas" style=' width:500px; height:400px; background-color:Gray;'>
  </div>
  
  <script type="text/javascript"> 
      google.load('gdata', '2.x', { packages: ['maps'] });
      google.setOnLoadCallback(init); 
  </script>
</body>
</html>
